<include file="/public/header" />
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '7156d1a798a03528b14cd669b194413b',
    }
</script>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=81fed9345d752098eb43bfbacea4b2bf&plugin=AMap.AutoComplete,AMap.PlaceSearch">
    </script>
<style>
    .layui-card-body {
        padding-left: 0;
    }

    .layui-form-item .layui-input-inline {
        width: 220px;
    }
</style>

<div class="layui-fluid layui-bg-white">

    <form class="layui-form layui-form-fixed">
        <gt name="$data.id" value="0"><input type="text" name="id" value="{$data.id}" hidden=""></gt>
        <div class="layui-form-item">
            <div class="layui-form">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>产品名称</th>
                            <th>产品图片</th>
                            <th>单价</th>
                            <th>编码</th>
                            <th>规格</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <volist name="$data['orderproduct']" id="vo">
                            <tr>
                                <td>{$vo.title}</td>
                                <td>
                                    <div class="layui-input-inline layui-uplpad-image">
                                        <img src="{$vo.images[0]|default=''}" lay-image-hover>
                                    </div>
                                </td>
                                <td>{$vo.price}元</td>
                                <td>{$vo.codes}</td>
                                <td>{$vo.spec}</td>
                                <td>x{$vo.number}</td>
                            </tr>
                        </volist>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('订单ID')}</label>
            <div class="layui-input-block">
                <input style="border: none;" disabled value="{$data.id}" class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('订单类型')}</label>
            <div class="layui-input-block">
                <input style="border: none;" disabled value="{$data.type_text}" class="layui-input"
                    lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('订单状态')}</label>
            <div class="layui-input-block">
                <input style="border: none;" disabled value="{$data.status_text}" class="layui-input"
                    lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('客户姓名')}</label>
            <div class="layui-input-block">
                <input name="name" style="border: none;" disabled value="{$data.name}" placeholder="{:__('客户姓名')}"
                    type="text" class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('客户电话')}</label>
            <div class="layui-input-block">
                <input name="mobile" style="border: none;" disabled value="{$data.mobile}" placeholder="{:__('客户电话')}"
                    type="text" class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('配送信息')}</label>
            <div class="layui-input-block">
                <input name="send_name" style="border: none;" disabled value="{$data.send_name}/{$data.send_mobile}"
                    type="text" class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('下单人')}</label>
            <div class="layui-input-block">
                <input name="send_name" style="border: none;" disabled value="{$data.put_name}/{$data.put_mobile}"
                    type="text" class="layui-input" lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('定位地址')}</label>
            <div class="layui-input-block">
                <input name="readdress" style="border: none;" disabled z-index="999999999999" id="tipinput"
                    placeholder="{:__('请输入定位地址')}" type="text" class="layui-input" lay-verify="required"
                    value="{$data.readdress}" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('详细地址')}</label>
            <div class="layui-input-block">
                <input name="address" style="border: none;" disabled value="{$data.address}" placeholder="{:__('详细地址')}"
                    type="text" class="layui-input" />
            </div>
        </div>
        <notempty name="$data['addjson']">
            <div class="layui-form-item">
                <label class="layui-form-label">{:__('额外地址')}</label>
                <volist name="$data['addjson']" id="vo">
                    <div class="layui-input-block">
                        <input name="readdress" style="border: none;" disabled z-index="999999999999" id="tipinput"
                            placeholder="{:__('请输入定位地址')}" type="text" class="layui-input" lay-verify="required"
                            value="{$vo.name}" />
                    </div>
                </volist>
            </div>
        </notempty>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('送达时间')}</label>
            <div class="layui-input-block">
                <input name="yjsd" style="border: none;" disabled value="{$data.yjsd}" lay-datetime=""
                    data-datetype="datetime" data-dateformat="yyyy-MM-dd HH:mm" placeholder="{:__('配送时间')}" type="text"
                    class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('备注')}</label>
            <div class="layui-input-block">
                <input name="remark" style="border: none;" disabled value="{$data.remark}" placeholder="{:__('备注')}"
                    type="text" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">送达图片</label>
            <div class="layui-input-block">
                <div class="layui-imagesbox">
                    <notempty name="$data['images']">
                        <volist name="$data['images']" id="vo">
                            <div class="layui-input-inline layui-uplpad-image">
                                <img src="{$vo.url}" lay-image-hover>
                            </div>
                        </volist>
                    </notempty>
                </div>
            </div>
        </div>
    </form>
</div>
<include file="/public/footer" />
<include file="/public/static" />
<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var form = layui.form;
        //监听地址选择
        form.on('radio(send_type)', function (data) {
            if (data.value <= 1) {
                layui.$('#selectids').show();
                layui.$('#selectoids').hide();
            } else {
                layui.$('#selectids').hide();
                layui.$('#selectoids').show();
            }
        });
        //默认隐藏地址信息
        layui.$('#sousuo').hide();
        //点击元素外其它地方隐藏
        layui.$('body').bind('click', function (event) {
            layui.$('#sousuo').hide();
        });
        //阻止冒泡
        layui.$('#sousuo').click(
            function (e) {
                e.stopPropagation()
            }
        );
        //输入框的值改变时触发
        layui.$("#tipinput").on("input", function (e) {
            //获取input输入的值
            layui.$.get("{:url('/ajax/getaddress')}",
                { keyword: e.delegateTarget.value }, function (res) {
                    if (res.code == 200) {
                        str = '';
                        layui.$.each(res.data, function (i, obj) {
                            str += '<input lay-filter="getsou" type="radio" name="suosuo" value="' + obj.location + '" title="' + obj.name + '[' + obj.address + ']' + '"><br/>';
                        });
                        layui.$('#sousuo').html(str);
                        layui.$('#sousuo').show();
                        form.render();
                    } else {
                        layui.$('#sousuo').html();
                        layui.$('#sousuo').hide();
                        form.render();
                    }

                }, 'json');
        });
        //监听地址选择
        form.on('radio(getsou)', function (data) {
            console.log(data.elem);
            var location = data.value.split(","); //字符分割 
            if (location.length >= 2) {
                layui.$('#sousuo').hide();
                layui.$("input[name='latlon']").val(data.value);
            } else {
                layer.msg('数据错误，请重试');
            }

        });
    })
</script>